<template>
	<view class="main">
		<loginVue :Visible="isTokenshow" @isModal="isToken" />
		<delVue :Visible="Visible" @isModal="isModal" @goStay="goStay" :oneText="oneText" :twoText="twoText"
			:threeText="threeText" :fourText="fourText" />
		<view class="title">
			<alltitleVue :title="title" :url="url" />
		</view>

		<u-popup v-model="open" mode="bottom" closeable='true' border-radius="24" height="550rpx">
			<view class="pop-tit pop-bor">
				<image :src="easeImg" mode=""></image>
			</view>
			<scroll-view class="popup-box popup-boxTwo" scroll-y="true" style="">

				<view class="bot">
					<view class="popup-title">品质保证</view>
					<view class="pop-text">
						商家已通过“国家企业信用信息公示系统”核验，许可资质齐全，商品品质有保证
					</view>
				</view>
				<view class="bot">
					<view class="popup-title"><text></text>专属客服</view>
					<view class="pop-text">
						享受放心购专属客服特权，7*24小时服务响应，快速解决售后问题

					</view>
				</view>
				<view class="bot">
					<view class="popup-title"><text></text>先行赔付</view>
					<view class="pop-text">
						若发生商品为过期/三无商品、商品描述与实物不符，消费者在15天内发起申请并提供有效凭证， 可享受先行赔付

					</view>
				</view>
			</scroll-view>
		</u-popup>
		<!-- 加入购物车 -->
		<u-popup v-model="openshop" mode="bottom" closeable='true' border-radius="24" height="550rpx">
			<view class="shop-box">
				<view class="shop-top">
					<image :src="goodDetails.image[0]" mode=""></image>
					<view class="">
						<view class="top-text">
							￥<text>{{goodDetails.price|| "0"}}</text>
						</view>
						<view class="bot-text">
							<!-- 剩余<text>1314</text>件 -->
						</view>
					</view>

				</view>
				<view class="shop-num">
					<text>数量</text>
					<u-number-box v-model="value" @change="valChange"></u-number-box>
				</view>
				<view class="shop-btn" @click="shopBtn">
					加入购物车
				</view>
			</view>
		</u-popup>

		<!-- 立即购买 -->
		<!-- border-radius="24" -->
		<u-popup v-model="atOnce" mode="bottom" closeable='true' :border-radius="popRadius" :height="popupHeight">
			<view class="pay-main" style="background:#F5F3F0;">
				<view class="pay-title">
					确认订单
				</view>
				<view class="pay-box" :class="{'pay-height':isHeight}">
					<view class="addressno" @click="goAdd">
						<view class="">
							<view class="" style="display: flex; align-items: center;">
								<text v-if="addreeName!=''" style="font-size: 28rpx;">{{addreeName}}</text>
								<image v-if="addreeName==''" :src="noImg" mode=""></image>
								<text class="addressno-add" :class="{'addressno-width':!isHeight}"
									style="font-size: 28rpx;">{{seleAddress}}</text>
							</view>
							<view class="no-bot" v-if="isHeight">
								<view class="" v-if="selectedDelivery=='pickup'">
									到院自提
								</view>
								<text v-if="defaults && selectedDelivery!='pickup'"">默认</text>
								<view v-if=" goodDetails.price * value>1000 && selectedDelivery!='pickup'">免运费
							</view>
							<view class="" v-if="goodDetails.price * value<1000 && selectedDelivery!='pickup'">
								运费 ￥{{freight[1].dictValue}}
							</view>
						</view>
					</view>
					<image class="right-img" :src="right" mode=""></image>
				</view>

				<view class="cart-item pay-flex">
					<view class="flex">
						<image :src="goodDetails.image[0]" mode=""></image>
						<view class="">
							<view class="top-text">
								￥<text>{{goodDetails.price|| "0"}}</text>
							</view>
						</view>
					</view>
					<u-number-box v-model="value" min='1' @change="valChange"></u-number-box>
				</view>
				<view class="cart-item">
					<view class="flex flex-item flex-bor">
						<text>支付方式</text>
						<view class="pay-img">
							<image :src="payImg" mode=""></image>
							微信支付
						</view>
					</view>
					<!-- <view class="flex flex-item" v-if="isHeight">
						<text>订单备注</text>
						<input type="text" placeholder="备注建议提前协商（250字以内）" />
					</view> -->
					<!-- <view class="flex flex-item">
							<text>发票</text>
							<text>请填写开票信息</text>

						</view> -->
				</view>
			</view>
			<u-popup v-model="showPopup2" mode="bottom" @close="closePopup" closeable='true' border-radius="24"
				height="650rpx">
				<view class="detail-main">
					<view class="pay-title">
						订单明细
					</view>
					<view class="detail-item">
						<view class="">
							<text>商品</text>
							<text>共{{value}}件商品</text>
						</view>
						<view class="">
							￥{{goodDetails.price * value|| "0"}}
						</view>
					</view>
					<view class="detail-item">
						<text>总运费</text>
						<text v-if="selectedDelivery!='pickup'">{{ Number(freight[1].dictValue) }}</text>

						<text v-if=" selectedDelivery=='pickup'">自提</text>



					</view>
				</view>
			</u-popup>
			<view class="footer" :class="{isHeight:isHeight}">
				<view class="footer-bot" v-if="isHeight">
					<view class="bot-all">
						<text>总价</text>
						<view class="" v-if="selectedDelivery!='pickup'">
							<text>￥</text>
							{{ (Number(goodDetails.price) * Number(value)) >= 1000 ? 
								    (Number(goodDetails.price) * Number(value)) : 
								    (Number(goodDetails.price) * Number(value)) + Number(freight[1].dictValue) }}
						</view>
						<view class="" v-else>
							<text>￥</text>
							{{goodDetails.price * value>=1000? goodDetails.price * value:goodDetails.price * value}}
						</view>
					</view>
					<view class="bot-right" @click="detail">
						明细
						<u-icon size="28" color="#CCA566" name="arrow-up"></u-icon>
					</view>
				</view>

				<view class="payment-btn" @click="payment">
					{{btnText}}
				</view>


			</view>
	</view>
	</u-popup>
	<!-- 添加地址 -->
	<u-popup v-model="address" mode="bottom" closeable='true' border-radius="24" height="1200rpx" @close="handleClose">
		<view class="pay-main">
			<view class="pay-title">
				选择收货地址和配送方式
			</view>
			<scroll-view class="address-box" scroll-y="true" style="">
				<view class="pay-box pay-item" v-if="caseList.length>0">
					<view class="address-top">
						<text class="top-text">常用地址</text>
						<view class="">
							<view class="" @click="guanLi">
								<u-icon size="28" color="#CCA566" name="edit-pen"></u-icon>
								<text> {{ischeck?'完成':'管理'}} </text>
							</view>
							<view class="" @click="addAddres">
								<u-icon size="28" color="#CCA566" name="plus"></u-icon>
								<text>新增地址</text>
							</view>
						</view>
					</view>
					<view class="container-box">
						<view class="info-card" v-for="(item,index) in caseList" :key="index"
							:class="{'info-color':infoBorder==index}" @click="cardClick(item,index)">
							<view class="card">
								<view class="card-left">
									<view class="">
										{{ getFormattedAddress(item.shippingAddress, item.address) }}
									</view>
									<view class="info">
										<text class="jia" v-if="item.label">{{item.label}}</text>
										<text class="info-name">{{item.name}}</text>
										<text>{{item.mobile}}</text>
									</view>
								</view>
								<image @click.stop="edit(item,index)" class="card-right" :src="addreeImg" mode="">
								</image>
							</view>
							<view class="check-box" v-if="ischeck">
								<view class="check-left">
									<view :class="['checkbox', { selected: item.isDefault }]"
										@click.stop="toggleItemSelection(item,index)">
										<!-- <u-icon v-if="item.isDefault" color="#fff" size="32"
												name="checkmark"></u-icon> -->
										<image v-if="item.isDefault" :src="btnBg" mode=""></image>
									</view>
									<text v-if="item.isDefault">默认地址</text>
								</view>
								<view class="del-btn" @click.stop="removeSelectedItems(item,index)">
									删除
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="address-no" v-else>
					<u-empty mode="address" text="暂无地址"></u-empty>
				</view>
				<view class="distribution" v-if="caseList.length>0">
					<view class="label">配送方式</view>

					<!-- 快递选项 -->
					<view class="option" @click="selectDelivery('express')">
						<view class="option-text">
							<text>快递</text>
							<text>￥{{freight[1].dictValue}}</text>
						</view>
						<view class="bot-chek" :class="{ selected: selectedDelivery === 'express' }">
							<!-- <u-icon v-if="selectedDelivery === 'express'" color="#fff" size="32"
									name="checkmark"></u-icon> -->
							<image v-if="selectedDelivery === 'express'" :src="btnBg" mode=""></image>
						</view>
					</view>

					<!-- 到院领取选项 -->
					<view class="option" @click="selectDelivery('pickup')">
						<view class="option-text">
							<text>到院领取</text>
						</view>
						<view class="bot-chek" :class="{ selected: selectedDelivery === 'pickup' }">
							<!-- <u-icon v-if="selectedDelivery === 'pickup'" color="#fff" size="32"
									name="checkmark"></u-icon> -->
							<image v-if="selectedDelivery === 'pickup'" :src="btnBg" mode=""></image>

						</view>
					</view>
				</view>
			</scroll-view>

			<view class="" @click="addressPay">
				<allBtnVue :btnText="addressText" />
			</view>
		</view>
	</u-popup>


	<!-- 加购成功 -->
	<u-popup v-model="openmore" mode="bottom" closeable='true' border-radius="24" height="1050rpx">
		<view class="pop-tits pop-bors">
			<image :src="gouBg" mode=""></image>
			加购成功
		</view>
		<view class="tits">
			加购了该商品的用户，还浏览了
		</view>
		<scroll-view scroll-y="true" style="" class="shop-boxs">
			<view class="list-boxs">
				<view class="shop-list" v-for="(item,index) in shopLists" :key="index">
					<view class="list-item">
						<image :src="item.image" mode=""></image>
						<view class="item-box">
							<view class="list-text">
								{{ item.title||"无名称" }}
							</view>
							<view class="top-text">
								￥<text>{{item.price|| "0"}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

		</scroll-view>
		<view class="shop-car">
			<view class="shop-btn" @click="goCar">
				去购物车
			</view>
		</view>

	</u-popup>

	<scroll-view class="content" scroll-y @scroll="onScroll" :scroll-top="scrollTop"
		:scroll-into-view="scrollIntoViewId" scroll-with-animation scroll-anchor-point="center">
		<view class="header" :class="{ fixed: isFixed }">
			<alltitleVue :title="title" :url="url" />
			<view class="header-title">
				<view @click="scrollToTop" :class="{'borcolor':isbor==0}">商品</view>
				<view @click="scrollToReview" :class="{'borcolor':isbor==1}">评价</view>
				<view @click="scrollToDetail" :class="{'borcolor':isbor==2}">详情</view>
			</view>
		</view>
		<view class="wrap-box" id="product">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="(item, index) in goodDetails.image">
						<view class="">
							<image :src="item" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="purchaser" :class="selectedIndex===0?'purchaser-top':'purchaser-down'">
				<swiper display-multiple-items="2" class="index-swipper" indicator-active-color="#fff" vertical="true"
					:indicator-dots="false" :circular="true" :autoplay="true" interval="5000" duration="500">
					<!-- 这一块是用户购买列表轮播，这里是死数据，开启就可以用， -->
					<!-- <swiper-item v-for="(item, index) in purchaserList" :key="index" @click="swiper(item)">
							<view class="swiper-purchaser">
								患者<text>{{ item }}</text>获得一张良药处方
							</view>
						</swiper-item> -->
				</swiper>
			</view>
		</view>

		<view class="body-content">
			<view class="body-title">
				<view class="title-box">
					<view class="box-fot">
						<view class="fot-left">
							<view class="left">
								<text class="le-ft">￥</text>
								<text class="le-te">{{goodDetails.price|| "0"}}</text>
								<text class="le-tr">￥{{goodDetails.originalPrice|| "0"}}</text>
							</view>
						</view>
						<view class="">
							{{goodDetails.virtuals|| "0"}}人付款
						</view>
					</view>
				</view>
				<view class="title-text">
					{{goodDetails.title|| ""}}
				</view>
				<view class="box-content">
					<view class="demo-tag-owner" v-for="(item,index) in goodDetails.label"
						:style="{ 'background-image': `url(${bg})` }">
						{{item}}
					</view>




				</view>
			</view>
			<view class="ease" @click="openshow">
				<view class="ease-tit">
					<image :src="easeImg" mode=""></image>
					<!-- <view class="">
							放心购
						</view> -->
				</view>
				<view class="ease-text">
					品质保证 准时发货 专属客服
					<image class="right-img" :src="right" mode=""></image>

				</view>
			</view>
			<!-- <view>
					<u-picker v-model="show" mode="region" @confirm="selectDistrict"></u-picker>
					<view class="ease" @click="show = true">
						<view class="district-box">
							<view class="district-text">
								<text>配送</text>
								<text>{{district}}</text>
							</view>
							<image class="right-img" :src="right" mode=""></image>
						</view>

					</view>
				</view> -->
			<view class="review" id="review">
				<view class="review-tit">
					<view class="tit-le">
						评价({{total}})
					</view>
					<view class="tit-ri" @click="goMore">
						<text>更多评价</text>
						<image class="right-img" :src="right" mode=""></image>

					</view>
				</view>
				<view class="" style="padding-top: 16rpx;" v-if="review.length>0">
					<view class="review-item" v-for="(item,index) in review" :key="index" @click="godetails(item)">
						<reviewVue :item="item" />
					</view>
				</view>
				<view class="" v-else>
					<u-empty text="暂无评价" mode="list"></u-empty>
				</view>
			</view>
			<view class="" id="detail">
				<u-divider color="#808080" bg-color="#F5F3F0" half-width="326" border-color="#e6e6e6">图文详情</u-divider>
				<view class="details">
					<image :src="goodDetails.detailImageUrl" mode="widthFix"></image>

				</view>
			</view>

		</view>
	</scroll-view>
	<view class="cart">
		<view class="cart-left">
			<view class="left-kefu">
				<button class="swipers-btn" open-type="contact">4565</button>
				<image :src="kefuImg" mode=""></image>
				<text>客服</text>
			</view>
			<view class="lefe-che" @click="goCar">
				<view class="che-img">
					<text v-if="count>0">{{count<100?count:'99+'}}</text>
					<image :src="carImg" mode=""></image>
				</view>
				<text>购物车</text>
			</view>
		</view>
		<view class="cart-right">
			<view class="" @click="openCar">
				加入购物车
			</view>
			<view class="" @click="oncePay">
				立即购买
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		toast,
		getStore,
		setStore,
		removeStore
	} from "@/utils/index";
	import {
		setgoodsCar,
		getregistration,
		goodsCar,
		getgoodDetails,
		setGoodsOrder,
		setGoodspay,
		getgoods,
		addAddress,
		address,
		evaluate,
		deleteAddress
	} from '../../service/api.js'
	import loginVue from "../../components/login.vue";
	import delVue from '../../components/del.vue'
	import config from '../../utils/config';
	import reviewVue from '../../components/review.vue';

	export default {
		data() {
			return {
				isTokenshow: false,
				right: config.ossHost + "2025/01/09/ee1bcb20aa0b4ae5a14ad5dce09c3ba6.png",
				popRadius: 24,
				defaults: 0,
				show: false,
				infoBorder: 0,
				//运费
				freight: [],
				oneText: "再想想",
				twoText: "确定删除",
				threeText: "确定要删除该地址吗？",
				fourText: "删除提示",
				showPopup2: false,
				isHeight: false,
				popupHeight: "850rpx",
				Visible: false,
				ischeck: false,
				selectedDelivery: 'express', // 当前选中的配送方式
				addressText: "添加地址",
				caseList: [],
				btnText: "立即支付",

				address: false,
				atOnce: false,
				show: false,
				openmore: false,
				value: 1,
				openshop: false,
				open: false,
				title: "",
				count: 0,
				scrollIntoViewId: '', // 控制滚动到某个特定位置
				purchaserList: [],

				//地址编辑
				editAddress: {
					id: "",
					isDefault: 0, // 默认地址
				},
				gouBg: config.ossHost + '2025/01/13/f81b265270134a3ebf76cc3dcb9dbdc6.png',
				btnBg: config.ossHost + '2025/01/03/b7e97ec044a3427180a2b3d13ffb10b2.png',
				noImg: config.topHost + '2025/01/07/5d4b4d120a1d442cb37e5bf8e758e106.png',

				addreeImg: config.topHost + '2025/01/08/b8299ae43e3a4f46984b84553940abe6.png',
				//微信支付
				payImg: config.topHost + '2024/12/28/d2f52723cf564faf91d4089fa1937e2d.png',
				//购物车
				carImg: config.topHost + '2024/12/28/4c63d406facd4eefbd0ebae3fe80f773.png',
				//客服
				kefuImg: config.topHost + '2024/12/28/3db01211b8874f80b303756a26f63c82.png',
				//放心购
				easeImg: config.topHost + '2024/12/28/cec2a7f568ee47aaa734720c2a68ac15.png',
				//背景大图       
				// bg: config.ossHost + 'xinan/2024/12/24/a0e9386534e346288c5bb82291bf13d4.png',
				//药品标签背景图
				bg: config.topHost + '2025/01/07/38b9bbb703604bffbbc65a99662ad5f0.png',
				district: "选择地区查看预计配送信息",
				review: [],
				isbor: 0,
				isFixed: false, // 用于控制导航栏的固定状态
				scrollTop: 0, // 当前滚动位置
				headerHeight: 0,
				shopLists: [],
				goodDetails: {},
				params: {
					pageNum: 1,
					pageSize: 10,
					orderByColumn: ""
				},
				token: "",
				delId: "",
				//创建购物车传递参数
				setgoods: {
					goodsId: 0,
					// memberId: "",
					// addressId: "",
					count: ""
				},
				//创建订单传递参数
				setpaygoods: [{
					id: 0,
					memberId: "",
					addressId: "",
					count: "",
					//默认为邮寄
					zt: 0,
				}, ],
				total: 0,
				addreeName: "",
				seleAddress: "请先选择地址和配送方式，再确认订单信息",
				storeAddress: ""




			}
		},
		onShow() {

			this.token = getStore("token") || "";
			this.info = JSON.parse(getStore("info")) || {};
			if (!this.token) {
				this.isTokenshow = true
			}
			this.getaddress()
			//赋值用户id
			this.setpaygoods[0].memberId = this.info.id;
		},
		components: {
			reviewVue,
			delVue,
			loginVue
		},
		mounted() {
			this.purchaserList = this.purchaserLists()
		},
		onLoad(options) {
			this.getcarriage();
			if (options.id) {
				this.setpaygoods[0].id = options.id;
				this.setgoods.goodsId = options.id
				this.getproducts(options.id)
				this.getevaluate(options.id);
			}
			this.getgoodsCar();
			this.getgood()
			this.getaddress()
			// this.getcaseList();
		},
		methods: {
			handleClose() {
				this.atOnce = true;
				this.address = false;
			},
			godetails(item) {
				uni.navigateTo({
					url: `/integration/reviewsDetails/index?id=${item.id}&goodsid=${this.setpaygoods[0].id}`
				})
			},



			async getevaluate(id) {

				let res = await evaluate(id)
				if (res.code == 200) {
					this.review = res.rows;

					this.total = res.total;
				}
			},
			async getgoodsCar() {
				let res = await goodsCar()
				if (res.code == 200) {
					this.count = res.rows.length;
				}
			},
			//获取运费价格
			async getcarriage() {
				let res = await getregistration("carriage");
				if (res.code == 200) {
					this.freight = res.rows;
					console.log(this.freight, "这里是否有数据")
				}
			},

			//未登录弹窗子组件方法
			isModal(item) {
				this.show = item;
			},
			isToken(item) {
				this.isTokenshow = item
			},
			getFormattedAddress(shippingAddress, address) {
				// 在这里可以进行格式化，例如去除多余的空格或进行连接
				return `${shippingAddress}  ${address}`;
			},
			//获取地址
			async getaddress() {
				let res = await address();
				if (res.code == 200) {

					this.caseList = res.data.records;

					let defaultCases = this.caseList.filter(item => item.isDefault === 1);
					if (this.caseList.length > 0) {
						this.addressText = "确认";
					}
					if (defaultCases.length > 0) {
						this.isHeight = true
						// this.address = false;

						this.popupHeight = "1200rpx";
						let price = this.goodDetails.price * this.value;
						if (price < 1000 && this.selectedDelivery == 'express') {
							price += Number(this.freight[1].dictValue);
						}
						this.btnText = `微信支付 ￥ ${price}`;
						//赋值地址id给新增订单参数
						this.setpaygoods[0].addressId = defaultCases[0].id;
						this.addreeName = defaultCases[0].name;
						this.defaults = defaultCases[0].isDefault;
						this.seleAddress = defaultCases[0].shippingAddress + defaultCases[0].address;
					} else {
						this.setpaygoods[0].addressId = this.caseList[0].id;
						this.addreeName = this.caseList[0].name;
						this.defaults = this.caseList[0].isDefault;
						this.seleAddress = this.caseList[0].shippingAddress + this.caseList[0].address;
					}

				}
			},
			//请求药品数据
			async getgood() {
				let res = await getgoods(this.params)
				if (res.code == 200) {

					this.shopLists = res.rows;
					for (let i = 0; i < this.shopLists.length; i++) {
						if (this.shopLists[i].photoUrl) {
							let photoUrls = this.shopLists[i].photoUrl.split(','); // 将 photoUrl 按逗号分割成数组
							this.shopLists[i].image = photoUrls[0]; // 将第一个 URL 赋值给 image
						}
					}


				}
			},



			//请求药品信息
			async getproducts(id) {

				let res = await getgoodDetails(id)
				if (res.code == 200) {
					this.goodDetails = res.data;
					if (this.goodDetails.photoUrl) {
						let image = this.goodDetails.photoUrl.split(','); // 将 photoUrl 按逗号分割成数组
						console.log(image, "111111")
						this.goodDetails.image = image; // 将第一个 URL 赋值给 image
					}

				}
			},
			//明细嵌套
			detail() {
				this.popRadius = 0,
					this.showPopup2 = !this.showPopup2;
			},
			closePopup() {
				this.popRadius = 24;
				this.showPopup2 = false;
			},
			//跳转修改地址
			edit(item, index) {
				uni.navigateTo({
					url: `/My/editAddress/index?item=${JSON.stringify(item)}`
				})
			},

			//获取地址
			// getcaseList() {
			// 	if(this.caseList.length>0){
			// 		this.seleAddress = this.caseList[0].address;
			// 		this.isHeight=true
			// 		this.popupHeight="1200rpx"
			// 	}

			// },
			isModal(item) {
				this.Visible = item
			},
			async goStay(item) {
				this.Visible = item
				let res = await deleteAddress({
					id: this.delId
				})
				if (res.code == 200) {
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
					this.getaddress();
				}
			},
			//编辑是否是默认地址
			async toggleItemSelection(item, index) {
				this.editAddress.id = item.id;
				this.caseList[index].isDefault = !item.isDefault;
				if (this.caseList[index].isDefault) {
					this.editAddress.isDefault = 1;
				} else {
					this.editAddress.isDefault = 0;
				}

				let res = await addAddress(this.editAddress);
				if (res.code == 200) {
					// 提交成功
					uni.showToast({
						title: '已设置',
						icon: 'success'
					});


				}

			},
			cardClick(item, index) {
				this.infoBorder = index;
				this.addreeName = item.name;
				this.seleAddress = item.shippingAddress + " " + item.address;
				this.storeAddress = item.shippingAddress + " " + item.address;
				if (this.selectedDelivery == 'express') {
					//这里赋值的原因是为了让其 到院领取 时不展示地址，存储下来，用于选中快递时赋值给
					this.seleAddress = this.storeAddress
				} else {
					this.storeAddress = this.seleAddress
					this.seleAddress = "";

				}
				this.defaults = item.isDefault;

			},
			removeSelectedItems(item, index) {
				this.Visible = true;
				this.delId = item.id
				this.isindex = index;



			},
			guanLi() {
				this.ischeck = !this.ischeck;
			},
			selectDelivery(method) {

				// 选择配送方式
				this.selectedDelivery = method;
				if (this.selectedDelivery == 'express') {
					this.setpaygoods[0].zt = 0;
					//这里赋值的原因是为了让其 到院领取 时不展示地址，存储下来，用于选中快递时赋值给
					this.seleAddress = this.storeAddress

				} else {
					this.storeAddress = this.seleAddress
					this.seleAddress = "";
					this.setpaygoods[0].zt = 1;
				}
			},
			//弹窗添加地址
			goAdd() {
				this.address = true;
				this.atOnce = false;
			},
			addAddres() {
				uni.navigateTo({
					url: '/My/addAddress/index'
				})
			},

			//弹窗地址选择按钮
			addressPay() {
				//是否有地址，
				if (this.caseList.length > 0) {
					this.isHeight = true
					this.address = false;
					this.atOnce = true;
					this.popupHeight = "1200rpx";
					let price = this.goodDetails.price * this.value;
					if (price < 1000 && this.selectedDelivery == 'express') {
						price += Number(this.freight[1].dictValue);
					}


					this.btnText = `微信支付 ￥ ${price}`
				} else {
					uni.navigateTo({
						url: '/My/addAddress/index'
					})
				}
			},
			async payment() {
				if (!this.isHeight) {
					uni.showToast({
						title: '请选择地址和配送方式',
						icon: 'none'
					});
					return;
				}
				if (this.value == 0) {
					uni.showToast({
						title: '请添加商品数量',
						icon: 'none'
					});
					return;
				}

				this.setpaygoods[0].count = this.value;

				let res = await setGoodsOrder(this.setpaygoods);
				if (res.code == 200) {

					this.paySign(2, res)

				}

			},
			//支付
			async paySign(index, item) {

				if (index == "1") {
					toast("支付宝支付暂未开放");
					return;
				}
				try {
					let params = {
						payType: index, //支付类型1:支付宝 2:微信
						orderNo: item.data.orderNumber,
					};
					let res = await setGoodspay(params);
					if (res.message == "未绑定微信！") {
						this.payBtnFlag = false;
						toast(res.message);
						setTimeout(() => {
							uni.navigateTo({
								url: "/My/setting",
							});
						}, 1500);
						return;
					}
					let data = res.data;
					uni.requestPayment({
						provider: "wxpay",
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: (res) => {
							if (res.errMsg === "requestPayment:ok") {
								toast("支付成功，耐心等候");
								uni.navigateTo({
									url: '/integration/paymentSuccess/index'
								})
								this.atOnce = false;
							}
						},
						fail: (err) => {
							toast("支付失败");
							this.atOnce = false;
							setTimeout(() => {
								uni.navigateTo({
									url: `/My/order/index?status=0`,
								});
							}, 1500);
						},
					});
				} catch (error) {

				}
			},




			oncePay() {
				if (this.token) {
					this.atOnce = true;
				} else {
					this.isTokenshow = true
				}

			},
			//加入购物车
			async shopBtn() {
				debugger;
				if (this.token) {
					this.setgoods.count = this.value
					let res = await setgoodsCar(this.setgoods);
					if (res.code == 200) {
						this.openshop = false;
						this.openmore = true;

					}

				} else {



					this.isTokenshow = true
				}
			},
			//去购物车
			goCar() {
				if (this.token) {
					this.openmore = false;
					uni.navigateTo({
						url: '/integration/shopCar/index'
					})
				} else {
					this.isTokenshow = true
				}




			},
			valChange(e) {
				let price = this.goodDetails.price * this.value;
				if (price < 1000 && this.selectedDelivery == 'express') {
					price += Number(this.freight[1].dictValue);
				} else if (this.value == 0) {
					this.value = 1;
				}
				this.btnText = `微信支付 ￥ ${price}`


			},
			openCar() {
				if (this.token) {
					this.openshop = true;
				} else {
					this.isTokenshow = true
				}

			},
			goMore() {
				uni.navigateTo({
					url: `/integration/moreReviews/index?id=${this.setpaygoods[0].id}`
				})
			},
			openshow() {

				this.open = !this.open;
			},
			// 滚动到商品部分
			scrollToTop() {
				this.isbor = 0;
				this.scrollIntoViewId = 'product';
			},
			// 滚动到评价部分
			scrollToReview() {
				this.isbor = 1;
				this.scrollIntoViewId = 'review';
			},
			// 滚动到详情部分
			scrollToDetail() {
				this.isbor = 2;
				this.scrollIntoViewId = 'detail';
			},
			// 监听滚动事件，动态更新导航栏
			onScroll(event) {
				const scrollTop = event.detail.scrollTop;
				this.isFixed = scrollTop > 90; // 100px为触发固定效果的滚动距离，可以根据需要调整
			},

			//选中地区
			selectDistrict(item) {
				this.district = item.province.label + ' ' + item.city.label + " " + item.area.label
			},
			purchaserLists() {
				const firstNames = [
					"*", "*", "*", "*敏", "*丽",
					"*", "*", "*", "*", "静",
					"*轩", "*怡", "*远", "*哲"
				];
				const lastNames = ["张", "李", "王", "赵", "刘", "陈", "杨", "黄", "周", "吴", "吕", "钱"];
				const names = []; // 创建一个空数组
				// 生成八个随机名字
				for (let i = 0; i < 8; i++) {
					const randomLastName = lastNames[Math.floor(Math.random() * lastNames.length)];
					const randomFirstName = firstNames[Math.floor(Math.random() * firstNames.length)];
					names.push(`${randomLastName}${randomFirstName}`); // 将生成的名字添加到数组中
				}
				return names; // 返回包含八个随机名字的数组
			},
		}
	}
</script>

<style lang="scss" scoped>
	.address-box {
		height: calc(1200rpx - 274rpx);

		.container-box {
			.info-card {
				margin-top: 24rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1rpx solid #E6E6E6;
				padding: 24rpx;

				.checkbox {
					border-radius: 50%;
					width: 30rpx;
					height: 30rpx;
					margin-right: 8rpx;

					border: 1rpx solid #B3B3B3;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.selected {
					background: #CCA566;
					border: none;

				}

				.check-box {
					margin-top: 24rpx;
					font-size: 24rpx;
					color: #4D4D4D;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.check-left {
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

					.del-btn {
						width: 80rpx;
						height: 40rpx;
						background: #F5F3F0;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						line-height: 40rpx;
						text-align: center;

					}
				}

				.card {


					display: flex;
					justify-content: space-between;
					align-items: center;

					.card-left {
						font-size: 24rpx;

						.info {
							margin-top: 16rpx;
							color: #808080;
						}

						.info-name {
							margin-right: 10rpx;
						}

						.jia {
							padding: 0rpx 10rpx;
							margin-right: 10rpx;
							background: #CCA566;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
						}
					}

					.card-right {
						width: 32rpx;
						height: 32rpx;
					}
				}

			}

			.info-color {
				border: 1rpx solid #CCA566;
			}
		}

		.address-no {
			height: calc(1200rpx - 294rpx);
		}

		.distribution {
			margin-top: 24rpx;
			background: #fff;
			padding: 24rpx;
			font-size: 24rpx;

			.label {
				margin-bottom: 14rpx;
				font-size: 28rpx;
				color: #000000;
			}

			.option {
				padding: 10rpx 0;
				display: flex;
				justify-content: space-between;

				.bot-chek {
					border-radius: 50%;
					width: 32rpx;
					height: 32rpx;
					box-sizing: border-box;
					border: 1rpx solid #B3B3B3;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.selected {
					background: #CCA566;
					border: none;

				}
			}
		}

		.address-top {
			display: flex;
			justify-content: space-between;

			.top-text {}

			view {
				font-size: 24rpx;
				display: flex;
				align-items: center;
				color: #CCA566;
				font-size: 24rpx;
				margin-left: 15rpx;
			}

		}
	}

	.pay-title {
		height: 111rpx;
		line-height: 111rpx;
		text-align: center;
		font-weight: bold;
		font-size: 32rpx;
		background: #fff;
	}

	.detail-main {
		padding: 24rpx;

		.detail-item {
			margin-bottom: 12rpx;
			display: flex;
			justify-content: space-between;
		}

	}

	.pay-main {
		background: #F5F3F0;


	}

	.pay-box {
		padding: 24rpx;
		// background: #fff;

		.addressno {

			padding: 24rpx;
			background: #fff;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			align-items: center;

			image {
				width: 27rpx;
				height: 31rpx;
				margin-right: 15rpx;
			}

			.no-bot {
				display: flex;
				align-items: center;
				margin-top: 5rpx;
				font-size: 24rpx;

				text {
					display: inline-block;
					width: 60rpx;
					height: 34rpx;
					background: #CCA566;
					border-radius: 50rpx 50rpx 50rpx 50rpx;
					font-size: 24rpx;
					color: #fff;
					text-align: center;
					line-height: 34rpx;
					margin-right: 10rpx;
				}
			}

			.addressno-add {
				margin-left: 20rpx;
				display: inline-block;
				width: 420rpx;
				white-space: nowrap;
				/* 防止文本换行 */
				overflow: hidden;
				/* 隐藏超出容器的文本 */
				text-overflow: ellipsis;
				/* 超出的部分显示省略号 */
			}

			.addressno-width {
				width: 557rpx;
			}
		}

		.cart-item {
			padding: 24rpx;
			background: #fff;
			border-radius: 16rpx;
			margin-top: 24rpx;

			.flex {
				display: flex;

				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 8rpx;
					margin-right: 22rpx;
				}

				.top-text {
					color: #FF7C54;

					text {
						font-weight: bold;
						font-size: 40rpx;
					}
				}

			}

			.flex-item {
				justify-content: space-between;
				align-items: center;
				padding-bottom: 24rpx;
				border-bottom: 1rpx solid #e6e6e6;

				.pay-img {
					display: flex;
					align-items: center;

					image {
						width: 42rpx;
						height: 42rpx;
						margin-right: 5rpx;
					}

				}

				input {
					width: 345rpx;
					font-size: 24rpx;
					color: #808080;
				}
			}

			.flex-item:last-child {
				margin-top: 24rpx;
				padding-bottom: 0;
				border-bottom: none;
			}


		}

		.pay-flex {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
		}
	}

	.pay-height {
		height: 810rpx;
	}

	.pay-item {
		background: #fff;
	}


	.main {
		background: #F5F3F0;

		.shop-btn {
			// margin-top: 100rpx;
			width: 702rpx;
			height: 80rpx;
			background: #CCA566;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			color: #fff;
			text-align: center;
			line-height: 80rpx;
		}

		.pop-tit {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 40rpx 0;
			font-size: 32rpx;
			color: #1A1A1A;
			border-bottom: 1rpx solid #E6E6E6;
		}

		.pop-bor {
			border-bottom: none;

			image {
				width: 120rpx;
				height: 38rpx;
				// margin-right: 10rpx;
			}
		}

		.popup-box {
			// height: calc(552rpx - 130rpx);

			.bot {}


		}

		.popup-boxTwo {
			// height: calc(500rpx - 130rpx);

			.bot {
				margin: 24rpx;

				.popup-title {
					margin-top: 12rpx;
					font-weight: bold;
					margin-bottom: 8rpx;
				}

				.pop-text {
					font-size: 22rpx;
					color: #808080;
					line-height: 26rpx;
				}
			}
		}

		.title {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 3;


		}

		.content {
			height: calc(100vh - 140rpx);


			.header.fixed {

				background-color: #fff;
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
				z-index: 1000;
			}

			.header {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				z-index: -1;
				background-color: transparent;
				transition: background-color 0.3s ease;

				.header-title {
					// padding-bottom: 10rpx;
					display: flex;
					justify-content: space-around;

					view {
						color: #808080;
						padding-bottom: 12rpx;
					}

					.borcolor {
						text-align: center;
						font-size: 32rpx;
						color: #1a1a1a;
						width: 80rpx;
						border-bottom: 4rpx solid #CCA566;
					}
				}
			}
		}

		.wrap-box {

			position: relative;
		}

		//轮播详情图
		.uni-margin-wrap {

			position: absolute;
			width: 100%;
			height: 700rpx;

			.swiper {

				height: 700rpx;

				view {
					image {
						width: 100%;
						height: 700rpx;
					}
				}
			}
		}

		//用户购买展示轮播
		.purchaser {


			width: auto;
			padding-top: 402rpx;
			padding-bottom: 120rpx;
			margin-left: 24rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;

			.index-swipper {
				width: auto;
				/* 防止超出父容器 */
				height: 150rpx;
			}

			.swiper-purchaser {
				display: inline-block;
				height: 48rpx;
				line-height: 48rpx;
				padding: 0 15rpx;
				color: #FFFFFF;
				background: rgba(24, 24, 30, 0.6);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				width: auto;
			}
		}

		.body-content {



			// padding: 24rpx;
			//放心购
			.ease {
				padding: 24rpx;
				background: #fff;
				margin: 24rpx 24rpx 24rpx 24rpx;
				border-radius: 16rpx;
				color: #808080;



				.ease-tit {
					display: flex;
					align-items: center;
					font-family: MiSans, MiSans;
					font-weight: 600;
					font-size: 28rpx;
					color: #18BD68;
					margin-bottom: 7rpx;

					image {
						width: 120rpx;
						height: 38rpx;
						margin-right: 8rpx;
					}

					view {
						font-weight: 600;
						font-size: 28rpx;
						color: #18BD68;
					}
				}

				.ease-text {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
				}

				.district-box {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.district-text {
						font-size: 20rpx;


						text:first-child {
							color: #4D4D4D;
							margin-right: 8rpx;
						}


					}
				}
			}

			.body-title {
				background: #fff;
				padding: 24rpx;

				.title-text {
					margin-top: 16rpx;
					font-family: MiSans, MiSans;
					font-weight: 600;
					font-size: 28rpx;
					color: #1A1A1A;
				}

				.box-content {
					margin-top: 6rpx;
					display: flex;
					align-items: center;

					view {
						padding: 0 14rpx;
						height: 35rpx;
						text-align: center;
						font-size: 20rpx;
						color: #CCA566;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						margin-right: 20rpx;
						line-height: 35rpx;
					}
				}

				.title-box {
					.box-fot {
						margin-top: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						color: #B3B3B3;

						view {
							color: #808080;
							font-size: 24rpx;
						}

						.fot-left {
							display: flex;
							align-items: flex-end;
							font-size: 24rpx;
							color: #808080;

							.left {
								display: flex;

							}

							.le-tr {
								margin-top: 20rpx;
								text-decoration: line-through;
							}

							.le-ft {
								margin-top: 24rpx;
								font-size: 20rpx;
								color: #FF7C54;
							}

							.le-te {
								font-weight: bold;
								font-size: 44rpx;
								color: #FF7C54;
							}
						}
					}
				}
			}
		}

		.review {
			padding: 24rpx;
			margin: 24rpx;
			border-radius: 16rpx;
			background: #fff;
			color: #808080;
			margin-bottom: 48rpx;

			.review-item {
				margin-top: 16rpx;
			}

			.review-tit {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.tit-le {
					color: #4D4D4D;
				}

				.tit-ri {
					display: flex;
					align-items: center;
				}
			}
		}

		.details {
			width: 100%;
			margin: 48rpx 0;

			image {

				// height: 3000rpx;
				width: 750rpx;
				/* 设置最大宽度，防止图片在大屏幕上过大 */
			}
		}

	}

	.cart {
		position: fixed;
		width: 702rpx;
		bottom: 0;
		left: 0;
		padding: 24rpx;
		display: flex;
		background: #fff;
		align-items: center;
		padding: 24rpx;
		justify-content: space-between;

		.cart-left {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #808080;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 5rpx;
			}

			.left-kefu {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 20rpx;


				button {
					width: 42rpx;
					height: 60rpx;
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
				}
			}

			.lefe-che {
				display: flex;
				flex-direction: column;
				align-items: center;

				.che-img {
					position: relative;

					text {
						position: absolute;
						top: -8rpx;
						right: -8rpx;
						display: inline-block;
						width: 30rpx;
						height: 30rpx;
						color: #fff;
						font-size: 20rpx;
						text-align: center;
						line-height: 30rpx;
						background: #C0393D;
						border-radius: 42rpx 42rpx 42rpx 42rpx;
					}

				}
			}
		}

		.cart-right {
			display: flex;
			align-items: center;

			view {
				border: 2rpx solid #CCA566;
				width: 267rpx;
				height: 90rpx;
				background: #fff;
				border-radius: 8rpx 0rpx 0rpx 8rpx;
				color: #CCA566;
				line-height: 90rpx;
				text-align: center;

			}

			view:last-child {
				border-radius: 0rpx 8rpx 8rpx 0rpx;
				color: #fff;
				background: #CCA566;
			}
		}
	}

	.shop-box {
		padding: 24rpx;

		.shop-top {
			display: flex;
			align-items: flex-end;

			image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}

			.top-text {

				color: #FF7C54;

				text {
					font-weight: bold;
					font-size: 40rpx;
				}
			}

			.bot-text {
				color: #808080;
			}
		}

		.shop-num {
			margin-top: 24rpx;
			padding-top: 24rpx;
			border-top: 1rpx solid #E6E6E6;
			display: flex;
			justify-content: space-between;
			margin-bottom: 100rpx;
		}


	}

	.pop-tits {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 40rpx;
		font-size: 32rpx;
		color: #1A1A1A;
		border-bottom: 1rpx solid #E6E6E6;
	}

	.pop-bors {
		border-bottom: none;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}

	.tits {
		text-align: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #808080;
		margin-top: 8rpx;
		padding-bottom: 40rpx;
	}

	.shop-car {
		height: 130rpx;
		background: #fff;
		padding: 24rpx;

	}

	.shop-boxs {
		width: 100%;
		height: calc(1050rpx - 340rpx);
		// background: #18BD68;
		background: #F5F3F0;

		.list-boxs {
			padding: 24rpx;
			display: grid;
			/* 启用网格布局 */
			grid-template-columns: repeat(3, 1fr);
			/* 设置三列，宽度均分 */
			gap: 16rpx;
			/* 设置元素之间的间距为10px */
			// padding: 24rpx;
			// display: flex;
			// justify-content: flex-start;
			// flex-wrap: wrap;
			// padding-right: 1.3%;
		}

		.shop-list {

			// width: 32%;
			// margin-left: 1.3%;
			// margin-right: 1.5%;
			// margin-top: 24rpx;

			.list-item {
				background: #fff;

				image {
					width: 224rpx;
					height: 205rpx;
				}

				.item-box {
					padding: 8rpx;
					background: #fff;
				}

				.list-text {
					font-size: 22rpx;
					color: #4D4D4D;
					line-height: 26rpx;
					width: 175rpx;
					display: -webkit-box;
					/* 使文本显示为多行 */
					-webkit-box-orient: vertical;
					/* 必须指定为 vertical */
					overflow: hidden;
					/* 隐藏超出的文本 */
					-webkit-line-clamp: 2;
					/* 限制显示的行数，这里设置为 2 行 */
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */
					margin-bottom: 8rpx;
				}

				.top-text {
					font-size: 22rpx;
					color: #FF7C54;

					text {
						font-weight: bold;
						font-size: 28rpx;
					}
				}
			}
		}
	}


	.footer {
		position: fixed;
		bottom: 0;
		z-index: 100000;
		left: 0;
		right: 0;
		width: 750rpx;
		height: 168rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(206, 190, 165, 0.2);
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.footer-bot {
			display: flex;
			justify-content: space-between;

			.bot-all {
				display: flex;
				align-items: center;

				view {
					font-weight: bold;
					font-size: 40rpx;

					text {
						font-size: 28rpx;
					}
				}
			}

			.bot-right {
				color: #CCA566;
				width: 110rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
			}
		}

		.payment-btn {
			line-height: 80rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
			width: 702rpx;
			height: 80rpx;
			background: #CCA566;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin: auto;
			margin-top: 15rpx;
		}
	}

	.isHeight {
		height: 202rpx;
		width: 702rpx;
		padding: 24rpx;
	}

	::deep.u-icon {
		display: block !important;
	}

	.right-img {
		width: 30rpx !important;
		height: 30rpx !important;
	}

	.flex-bor {
		border-bottom: 0;
	}
</style>